<template>
	<view class="auth-page">
		<!-- 顶部导航 -->
		<view class="auth-header">
			<view class="header-title">{{isLogin ? '登录' : '注册'}}</view>
			<view class="header-back" @click="goBack" v-if="showBack">
				<uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
			</view>
		</view>

		<!-- 登录注册切换 -->
		<view class="auth-tabs">
			<view class="tab-item" :class="{active: isLogin}" @click="switchAuth(true)">登录</view>
			<view class="tab-item" :class="{active: !isLogin}" @click="switchAuth(false)">注册</view>
		</view>

		<!-- 登录表单 -->
		<view class="auth-form" v-if="isLogin">
			<view class="form-item">
				<input type="text" v-model="loginForm.username" placeholder="请输入用户名" class="input" />
			</view>
			<view class="form-item">
				<input type="password" v-model="loginForm.password" placeholder="请输入密码" class="input" />
			</view>
			<button class="submit-btn" :loading="loginLoading" @click="handleLogin">登录</button>

			<view class="auth-footer">
				<text @click="navigateTo('/pages/auth/forget')">忘记密码?</text>
				<text @click="navigateTo('/pages/auth/quick')">短信验证码登录</text>
			</view>
		</view>

		<!-- 注册表单 -->
		<view class="auth-form" v-else>
			<view class="form-item">
				<input type="text" v-model="registerForm.username" placeholder="请输入用户名" class="input" />
			</view>
			<view class="form-item">
				<input type="text" v-model="registerForm.phone" placeholder="请输入手机号" class="input" />
			</view>
			<view class="form-item">
				<input type="text" v-model="registerForm.email" placeholder="请输入邮箱" class="input" />
			</view>
			<view class="form-item">
				<input type="password" v-model="registerForm.password" placeholder="请输入密码" class="input" />
			</view>
			<view class="form-item">
				<input type="password" v-model="registerForm.confirmPassword" placeholder="请确认密码" class="input" />
			</view>
			<button class="submit-btn" :loading="registerLoading" @click="handleRegister">注册</button>

			<view class="auth-agreement">
				<text>注册即表示同意</text>
				<text class="agreement-link">《用户协议》</text>
				<text>和</text>
				<text class="agreement-link">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: true, // 当前是否为登录状态
				showBack: true, // 是否显示返回按钮
				loginLoading: false, // 登录按钮加载状态
				registerLoading: false, // 注册按钮加载状态

				// 登录表单
				loginForm: {
					username: '',
					password: ''
				},

				// 注册表单
				registerForm: {
					username: '',
					phone: '',
					email: '',
					password: '',
					confirmPassword: ''
				}
			}
		},
		onLoad(options) {
			// 可以通过参数控制初始显示登录还是注册
			if (options.type === 'register') {
				this.isLogin = false;
			}

			// 检查是否有登录状态
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 切换登录/注册
			switchAuth(isLogin) {
				this.isLogin = isLogin;
			},

			// 导航到指定页面
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},

			// 处理登录
			handleLogin() {
				if (!this.loginForm.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return;
				}

				if (!this.loginForm.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}

				this.loginLoading = true;

				// 这里替换为你的实际API请求
				uni.request({
					url: 'http://localhost:8081/api/users/login',
					method: 'POST',
					data: {
						userName: this.loginForm.username,
						password: this.loginForm.password
					},
					success: (res) => {
						this.loginLoading = false;

						if (res.data.code === '001') {
							// 登录成功
							const userInfo = {
								user_id: res.data.user.user_id,
								userName: this.loginForm.username
							};

							// 存储用户信息
							uni.setStorageSync('userInfo', userInfo);
							uni.setStorageSync('user', res.data.user)
							// 提示登录成功
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							});

							// 跳转到首页
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}, 1500);
						} else {
							// 登录失败
							uni.showToast({
								title: res.data.msg || '登录失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						this.loginLoading = false;
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
						console.error(err);
					}
				});
			},

			// 处理注册
			handleRegister() {
				// 简单验证
				if (!this.registerForm.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return;
				}

				if (!this.registerForm.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}

				if (!this.registerForm.email) {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return;
				}

				if (!this.registerForm.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}

				if (this.registerForm.password !== this.registerForm.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return;
				}

				this.registerLoading = true;

				// 这里替换为你的实际API请求
				uni.request({
					url: 'http://localhost:8081/api/users/register',
					method: 'POST',
					data: {
						userName: this.registerForm.username,
						password: this.registerForm.password,
						phoneNum: this.registerForm.phone,
						email: this.registerForm.email,
						roleType: 'user',
						type: "random"
					},
					success: (res) => {
						this.registerLoading = false;

						if (res.data.code === '001') {
							// 注册成功
							uni.showToast({
								title: '注册成功',
								icon: 'success'
							});

							// 自动切换到登录界面
							this.isLogin = true;
							this.loginForm.username = this.registerForm.username;
							this.loginForm.password = '';
						} else {
							// 注册失败
							uni.showToast({
								title: res.data.msg || '注册失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						this.registerLoading = false;
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
						console.error(err);
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.auth-page {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 40rpx;

		.auth-header {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			background-color: #fff;

			.header-title {
				font-size: 36rpx;
				font-weight: 500;
				color: #333;
			}

			.header-back {
				position: absolute;
				left: 20rpx;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.auth-tabs {
			display: flex;
			background-color: #fff;
			margin-bottom: 20rpx;

			.tab-item {
				flex: 1;
				text-align: center;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 32rpx;
				color: #666;
				position: relative;

				&.active {
					color: #007AFF;
					font-weight: bold;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 80rpx;
						height: 4rpx;
						background-color: #007AFF;
						border-radius: 2rpx;
					}
				}
			}
		}

		.auth-form {
			margin: 0 30rpx;
			padding: 40rpx;
			background-color: #fff;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

			.form-item {
				margin-bottom: 40rpx;
				border-bottom: 1rpx solid #eee;

				.input {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					color: #333;
					padding: 10rpx 0;
				}
			}

			.submit-btn {
				margin-top: 60rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: linear-gradient(to right, #007AFF, #00aaff);
				color: #fff;
				font-size: 32rpx;
				border-radius: 44rpx;
				box-shadow: 0 8rpx 20rpx rgba(0, 122, 255, 0.3);
			}

			.auth-footer {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				font-size: 24rpx;
				color: #999;

				text {
					&:active {
						opacity: 0.7;
					}
				}
			}

			.auth-agreement {
				margin-top: 30rpx;
				font-size: 24rpx;
				color: #999;
				text-align: center;

				.agreement-link {
					color: #007AFF;

					&:active {
						opacity: 0.7;
					}
				}
			}
		}
	}
</style>